<template>
  <div class="title">
    <p class="fs-28 pdb-24 font333 bold">{{ classObj.title }}</p>
    <div class="df aic font666 pdb-24 line">
      <p>{{ classObj.playNum }}次播放</p>
      <p class="ml-24">{{ classObj.data }} {{ classObj.time }}</p>
    </div>
    <p class="mb-24 mt-24 font333 fs-20 bold">课程信息</p>
    <p class="mb-24 font999">简介</p>
    <p class="font666">{{ classObj.paragraph }}</p>
    <div class="mt-24 df aic">
      <p class="font999">教师：</p>
      <p class="font666">{{ classObj.teacher }}</p>
    </div>
    <div class="mt-24 df aic">
      <p class="font999">教室：</p>
      <p class="font666">{{ classObj.className }}</p>
    </div>
    <div class="mt-24 df aic">
      <p class="font999">班级：</p>
      <p class="font666">{{ classObj.classRoom }}</p>
    </div>
  </div>
  <div class="bottom df aic">
    <div class="left df aic">
      <div class="video-btn df fdc aic fs-24 mr-40">
        <svg-icon iconClass="like" class="fs-48"></svg-icon>
        <span class="video-btn__text">{{ classObj?.markNum }}</span>
      </div>
      <div class="video-btn df fdc aic fs-24 mr-40">
        <svg-icon iconClass="share" class="fs-48"></svg-icon>
        <span class="video-btn__text">{{ classObj?.collectNum }}</span>
      </div>
      <div class="video-btn df fdc aic fs-24 mr-40">
        <!-- video-btn--blue -->
        <svg-icon iconClass="edit-square" class="fs-48"></svg-icon>
        <span class="video-btn__text">{{ classObj?.editNum }}</span>
      </div>
    </div>
    <div class="right margauto">
      <s-button type="primary" @click="$emit('start')">开始评课</s-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted, computed } from 'vue';
  import { useRoute } from 'vue-router';
  import { useStore } from '@/store';
  import { SvgIcon } from '@/components/svg-icon';
  import { SButton } from '@/components/button';
  import { getCourseDetail } from '@/api/source';

  export default defineComponent({
    name: 'ShowComponent',
    components: {
      SvgIcon,
      SButton,
    },
    props: {},
    emits: ['end', 'start'],
    setup() {
      const route = useRoute();

      const store = useStore();

      const state = reactive({
        classObj: {} as any,
      });

      onMounted(async () => {
        state.classObj = await getCourseDetail({});
      });

      /**
       * @description 加载表格数据
       */

      onMounted(async () => {});

      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style lang="scss" scoped>
  .video-btn--blue {
    color: #5066e1;
  }

  .title {
    padding: 24px;
  }
  .bottom {
    height: 88px;
    width: 702px;
    margin-top: auto;
    border-top: 1px solid #999;
    padding: 24px 32px;
  }
</style>
